<template>
	<view>
		<view class="w-1 sticky bg-ff fr-c" style="padding: 25rpx 0;">
			<view class="obox fr-s-c">
				<view class="fr-c" @click="changeTab(index)" :class="cur==index?'boxinact':'boxin'"
					:style="{border:index==4?'none':''}" v-for="(item,index) in tabs" :key="index" style="width: 20%;">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="w-1 p-r-30 m-t-20">
			<view class="w-1 br-20 bg-ff" style="padding: 22rpx;">
				<view class="w-1 fr-b-c">
					<image style="width: 40rpx; height: 40rpx;" src="/static/images/tab1/data.png" mode=""></image>
					<text class="c-00 fs-28 bold flex-1 m-l-15">{{tabs[cur].name}}数据</text>
					<!-- <image style="width: 35rpx; height: 35rpx;" src="/static/images/tab1/right.png" mode=""></image> -->
				</view>
				<view class="w-1 fr-s-s m-t-30">
					<view class="fl-c" style="width: 25%;">
						<text class="c-00 fs-36 bold">{{info.ordernum}}</text>
						<text class="m-t-5 c-77 fs-24">接单量</text>
					</view>
					<view class="fl-c" style="width: 25%;">
						<text class="c-00 fs-36 bold">{{info.sucblv}}%</text>
						<text class="m-t-5 c-77 fs-24">成功率</text>
					</view>
					<view class="fl-c" style="width: 25%;">
						<text class="c-00 fs-36 bold">{{info.closeblv}}%</text>
						<text class="m-t-5 c-77 fs-24">上门率</text>
					</view>
					<view class="fl-c" style="width: 25%;">
						<price size1="24rpx" size2="36rpx" size3="24rpx" :price="info.incomemoney"></price>
						<text class="m-t-5 c-77 fs-24">收益</text>
					</view>
				</view>
			</view>


			<view class="charts-box bg-ff m-t-20 br-20" v-if="chartData">
				<view class="c-00 fs-28 p-30 bold">接单量</view>
				<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :canvas2d="true"
					canvasId="FUesvAtEITkaiuRxKgslzjgHzVKPtmBq" :ontouch="true" />
				<view style="height: 30rpx;"></view>
			</view>
			<view class="charts-box bg-ff m-t-20 br-20" v-if="chartData2">
				<view class="c-00 fs-28 p-30 bold">成功率</view>
				<qiun-data-charts tooltipFormat="tooltipDemo2" type="line" :opts="opts2" :chartData="chartData2" :canvas2d="true"
					canvasId="FUesvAtEITkaiuRxKgsPtmBq" :ontouch="true" />
				<view style="height: 30rpx;"></view>
			</view>
			<view class="charts-box bg-ff m-t-20 br-20" v-if="chartData3">
				<view class="c-00 fs-28 p-30 bold">上门率</view>
				<qiun-data-charts tooltipFormat="tooltipDemo2" type="line" :opts="opts3" :chartData="chartData3" :canvas2d="true"
					canvasId="FUeTkaiuRxKgslzjgHzVKPtmBq" :ontouch="true" />
				<view style="height: 30rpx;"></view>
			</view>
			<view class="charts-box bg-ff m-t-20 br-20" v-if="chartData1">
				<view class="c-00 fs-28 p-30 bold">收益</view>
				<qiun-data-charts type="line" :opts="opts1" :chartData="chartData1" :canvas2d="true"
					canvasId="FUesvAtEITkaigslzjgHzVKPtmBq" :ontouch="true" />
				<view style="height: 30rpx;"></view>
			</view>
		</view>

	</view>
</template>

<script>
import { nextTick } from 'vue';

	export default {
		data() {
			return {
				chartData: '',
				chartData1: '',
				chartData2: '',
				chartData3: '',
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					dataLabel:false,
					dataPointShapeType:'hollow',
					color: ['#01796D'],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						scrollShow: false,
						itemCount: 5,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						// format:'yAxisDemos'  // ￥
						// format: 'yAxisDemop' // %
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
					}
				},
				opts1: {
					dataLabel:false,
					dataPointShapeType:'hollow',
					color: ['#01796D'],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						scrollShow: false,
						itemCount: 5,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						format:'yAxisDemos'  // ￥
						// format: 'yAxisDemop' // %
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
					}
				},
				opts2: {
					dataLabel:false,
					dataPointShapeType:'hollow',
					color: ['#01796D'],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						scrollShow: false,
						itemCount: 5,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						// format:'yAxisDemos'  // ￥
						format: 'yAxisDemop' // %
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
					}
				},
				opts3: {
					dataLabel:false,
					dataPointShapeType:'hollow',
					color: ['#01796D'],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						scrollShow: false,
						itemCount: 5,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						// format:'yAxisDemos'  // ￥
						format: 'yAxisDemop' // %
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
					}
				},

				tabs: [{
					name: '今日',
					val: '1'
				}, {
					name: '昨日',
					val: '2'
				}, {
					name: '上周',
					val: '3'
				}, {
					name: '上月',
					val: '4'
				}, {
					name: '本周',
					val: '6'
				}],
				cur: 0,
				info: ''
			};
		},
		onLoad() {
			// this.getdata()
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				uni.$post({
					url:'/api/User/Materdatatistics',
					data:{
						type:this.tabs[this.cur].val
					}
				}).then(res=>{
					this.info = res.data;
					if(res.data.shuju){
						res.data.shuju.map(i=>{
							i.categories = i.time;
							i.series = [{
								name:i.title,
								data:i.order_count || i.total_amount || i.smlv || i.cglv
							}]
						})
					}
					this.chartData = res.data.shuju.find(item=>item.title=='接单量');
					this.chartData1 = res.data.shuju.find(item=>item.title=='收益');
					this.chartData2 = res.data.shuju.find(item=>item.title=='成功率');
					this.chartData3 = res.data.shuju.find(item=>item.title=='上门率');
				})
				
				return
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["09:00", "10:00", "11:00", "12:00", "13:00"],
						series: [{
							name: "接单量",
							data: [0, 2, 0, 1, 0],
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},


			changeTab(index) {
				this.cur = index;
				this.chartData = '';
				this.chartData1 = '';
				this.chartData2 = '';
				this.chartData3 = '';
				// setTimeout(()=>{
					this.getServerData()
				// },500)
			},


			getdata() {
				uni.$post({
					url: '/api/User/Materdatatistics',
					data: {
						type: this.tabs[this.cur].val
					},
					// loading: false
				}).then(res => {
					this.info = res.data;
				})
			}
		}
	};
</script>



<style>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
	}

	page {
		background: #f1f5f6;
	}

	.obox {
		width: 690rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 28rpx;
		overflow: hidden;
		border: 2rpx solid #01796D;
	}

	.boxin {
		width: 138rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border-right: 2rpx solid #01796D;
		font-size: 26rpx;
		color: #01796D;
		text-align: center;
	}

	.boxinact {
		width: 138rpx;
		height: 56rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		font-size: 26rpx;
		color: #ffffff;
		text-align: center;
		background: #01796D;
	}
</style>